import React, { Component } from 'react';
import styles from "./OrderItem.module.scss";
import Lazy from "../../../utils/imgLazyLoad"


class OrderItem extends Component {
    totalPrice=(arr)=>{
        arr = arr.map(v=>{
          return v.price
        })
        let price = arr.reduce((p,v)=>{
          return p+v;
        })
        return "￥"+parseFloat(price,0);
      }
      emitGoDetailPage=()=>{
        console.log(this.props)
        this.props.goDetailPage()
      }
    render() {
        return (
            <div 
            className={`${styles.orderItem} ${this.props.addClass==="show"? styles.orderItemsShow:styles.orderItemsHide}`}
            key={this.props.orderItem.orderId}
            onClick={this.emitGoDetailPage}
            >
                <div className={styles.shopLogo}>
                  <Lazy className="pic" src={this.props.orderItem.imgUrl} alt={this.props.orderItem.shop}></Lazy>
                </div>
                <div className={styles.itemRight}>
                  <h4 className={styles.shopName}>
                    <span>{this.props.orderItem.shop}</span>
                    <svg className="icon" aria-hidden="true">
                    <use href="#icon-you"></use>
                  </svg>
                  </h4>
                  <div className={styles.discountInfo}>{
                  this.props.orderItem.discounts.map((val,index)=><span key={val}>{val}</span>) 
                  }</div>
                  <div className={styles.orderGoodsList}>
                    <dl className={styles.orderGoodsItem} key={this.props.orderItem.goods[0].id}>
                      <dt><Lazy className='pic' src={this.props.orderItem.goods[0].imgUrl} alt={this.props.orderItem.goods[0].name}></Lazy></dt>
                      <dd>{this.props.orderItem.goods[0].name}</dd>
                    </dl>
                    <dl className={styles.orderGoodsItem} key={this.props.orderItem.goods[1].id}>
                      <dt><Lazy className="pic" src={this.props.orderItem.goods[1].imgUrl} alt={this.props.orderItem.goods[1].name}></Lazy></dt>
                      <dd>{this.props.orderItem.goods[1].name}</dd>
                    </dl>
                    <div className={styles.orderTotal}>
                      <span className={styles.totalPrice}>{
                        this.totalPrice(this.props.orderItem.goods)
                      }</span>
                      <span className={styles.totalNum}>共{this.props.orderItem.goods.length}件</span>
                    </div>
                  </div>
                <div className={styles.buttons}>
                  <span className={styles.orderAginBtn}>再来一单</span>
                  <span className={styles.commentBtn}>评价得金豆</span>
                </div>
                </div>
                <span className={styles.orderStatus}>
                  {this.props.orderItem.orderStatus}
                </span>
            </div>
        )
    }
}
export default OrderItem